/*
 * @Author: zhicheng.yao 
 * @Date: 2021-10-19 18:00:25 
 * @Last Modified by: zhicheng.yao
 * @Last Modified time: 2021-10-21 17:55:01
 */
.ButtonBox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 32px;
	border-radius: 4px;
	font-size: 14px;
	transition: all 0.5s;
	cursor: pointer;
	user-select: none;

	.refresh_icon {
		font-size: 14px;
		color: $grey-1;
	}

	// 自适应宽度
	&.auto-w {
		width: max-content;
		padding: 0 14px;
	}

	&.middleBtn {
		width: 68px;
		height: 32px;
		font-size: 14px;
	}

	&.middleBtn2 {
		width: 84px;
		height: 32px;
		font-size: 14px;
	}

	&.miniBtn {
		width: 48px;
		height: 24px;
		font-size: 13px;
	}

	&.txtBtn {
		width: auto;
		height: 20px;
		font-size: 12px;
	}

	&.labelBtn {
		width: auto;
		height: 20px;
		border-radius: 10px;
		font-size: 12px;
		padding: 0 7px;
		color: #b9bcc5;
		border: 1px solid #d4d7de;

		&:hover {
			color: #5e6576;
		}
	}

	&.downloadBtn {
		width: 108px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #d4d7de;
		&:hover {
			border: 1px solid #5e6576;
		}
		em {
			width: 16px;
			height: 16px;
			margin-right: 4px;
			//@extend %iconWmV3;
			background-position: -101px -21px;
		}
	}

	&.txtBlue {
		color: $blue-2;

		&:hover {
			color: #4173ff;
			text-decoration: underline;
		}
	}

	&.txtdarkBlue {
		color: #4173ff;

		&:hover {
			color: #235af2;
		}
	}

	&.cancel {
		border: 1px solid transparent;
		color: #5e6576;

		&:hover {
			border: 1px solid #f0f1f3;
			background: #f0f1f3;
			color: #485767;
		}
	}

	&.confirm,
	&.edit,
	&.esc {
		background: #4173ff;
		border: 1px solid #4173ff;
		color: #fff;

		&:hover {
			background: #235af2;
		}
	}

	&.green {
		background: #5bc9a4;
		border: 1px solid #5bc9a4;
		color: #fff;

		&:hover {
			border: 1px solid #26bd8b;
			background: #26bd8b;
		}
	}

	&.black {
		background: #5e6576;
		border: 1px solid #5e6576;
		color: #fff;

		&:hover {
			border: 1px solid #434a5f;
			background: #434a5f;
		}
	}

	&.disable {
		background: #d4d7de;
		border: 1px solid #d4d7de;
		color: #fff;
		cursor: not-allowed;
	}

	&.disabled {
		background: #f0f1f3;
		border: 1px solid #d4d7de;
		color: #b9bcc5;
		cursor: not-allowed;
	}

	&.white {
		background: #fff;
		border: 1px solid #4173ff;
		color: #4173ff;

		&:hover {
			background: #235af2;
			color: #fff;
		}
	}

	&.noBg {
		border: 1px solid #4173ff;
		color: #4173ff;

		&:hover {
			background: #235af2;
			color: #fff;
		}
	}

	&.delete {
		background: #f16272;
		border: 1px solid #f16272;
		color: #fff;

		&:hover {
			background: #da4152;
			border: 1px solid #da4152;
		}
	}

	&.gray {
		background: #fff;
		border: 1px solid #d4d7de;
		color: #5e6576;

		&:hover {
			border: 1px solid #606269;
		}
	}

	&.line {
		background: #fff;
		border: 1px solid #d4d7de;
		color: #5e6576;

		&:hover {
			background: #fff;
			border: 1px solid #606269;
		}
	}

	&.blueOutline {
		background: #fff;
		border: 1px solid #d4d7de;
		color: #5e6576;

		&:hover {
			border: 1px solid #4173ff;
		}
	}

	&.blue_txt {
		background: #f7f8f9;
		color: #4173ff;
	}

	&.gray-dashed {
		background: #fff;
		border: 1px dashed $color-grey;
		color: $grey-1;
		&:hover {
			border: 1px solid $grey-1;
		}
	}
}
